{% extends 'base-layui.html' %}

{% block header %}
  <h1>{% block title %}数据库表结构比对系统{% endblock %}</h1>
  <!-- 引入 layui.js -->
<!--<link rel="stylesheet" href="layui/js/layui.js">-->
{% endblock %}

{% block leftcatalog %}
<ul class="layui-nav layui-nav-tree" lay-filter="test">
  <li class="layui-nav-item"><a href="/configDatabaseSource">配置数据源</a></li>
  <li class="layui-nav-item layui-this"><a href="/configCompareTask">表模型比对</a></li>
<!--  <li class="layui-nav-item"><a href="javascript:;">表差异比对</a></li>-->
<!--  <li class="layui-nav-item"><a href="/compareColumn">字段差异比对</a></li>-->
<!--  <li class="layui-nav-item">-->
<!--    <a href="/compare">所有表及字段信息</a>-->
<!--  </li>-->

  <!-- 更多菜单 -->
</ul>
{% endblock %}

{% block maincontent %}

<form class="layui-form layui-row layui-col-space16" >
  <div class="layui-col-md3">
    <div class="layui-input-wrap">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-tabs"></i>
      </div>
      <input  type="text" id="task_name" name="task_name" value="{{ task_name }}" placeholder="任务名称" class="layui-input" lay-affix="clear">
    </div>
  </div>
  <div class="layui-col-md3">
    <div class="layui-input-wrap">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-app"></i>
      </div>
      <input  type="text" id="connect_name" name="connect_name" value="{{ connect_name }}" placeholder="数据源名称" lay-affix="clear" class="layui-input">
    </div>
  </div>
  <div class="layui-col-md3">
    <div class="layui-btn-container layui-col-xs12">
      <button  class="layui-btn" lay-submit lay-filter="demo-table-search">
        <i class="layui-icon layui-icon-search"></i>查询
      </button>
      <button  type="reset" class="layui-btn layui-btn-primary">
        <i class="layui-icon layui-icon-set-sm"></i>重置
      </button>
    </div>
  </div>
</form>


<table class="layui-hide" id="ID-table-demo-search">
</table>

<script type="text/html" id="toolbarDemo">

  <div class="layui-btn-container">

    <div class="layui-col-md2">
      <div class="layui-btn-container layui-col-xs6">
        <button class="layui-btn" lay-event="add" onclick="addCompareTask();">
          <i class="layui-icon layui-icon-add-circle-fine"></i>创建比对任务
        </button>
      </div>
    </div>

  </div>

</script>

{% endblock %}

{% block script %}



<!--<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>-->

<script type="text/html" id="barOption">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">
      更多
      <i class="layui-icon layui-icon-down"></i>
    </a>
  </div>
</script>

<!-- 表格操作按钮集 -->
<!--<script type="text/html" id="barOption">
    <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
</script>-->

<script src="{{ url_for('static', filename='layui/layui.js') }}"></script>
<script>

  var task_name_tmp = getUrlParam("task_name");
  var connect_name_tmp = getUrlParam("connect_name");

  // console.log("getUrlParams(\"table_name\") = " + table_name_tmp);
  document.getElementById("task_name").value = task_name_tmp;
  document.getElementById("connect_name").value = connect_name_tmp;

layui.use(['table', 'form', 'layer', 'dropdown'], function(){
  var $ = layui.$;
  var table = layui.table;
  var layer = layui.layer;
  var form = layui.form;
  var dropdown = layui.dropdown;

  // 渲染
  table.render({
    elem: '#ID-table-demo-search',
    url: '/getConfigCompareTaskData',
    // page: true,
    page : {
      //limits :[10,20,50,100]
      //count: data.length             //数据总数
      limit : 10 //每页显示条数
      ,limits : [ 10, 20, 50, 100, 1000 ]
      ,curr : 1 //起始页
      ,groups : 5 //连续页码个数
      ,prev : '上一页' //上一页文本
      ,next : '下一页' //下一页文本
      ,first : 1 //首页文本
      //, last: 100                     //尾页文本
      ,layout : [ 'prev', 'page', 'next',
              'refresh', 'skip', 'count',
              'limit' ]
    },
    height : 700,
    // toolbar : true,
    toolbar: '#toolbarDemo',
    defaultToolbar: ['filter', 'exports'],
    where : {
      "connect_name"  : connect_name_tmp,
      "task_name" : task_name_tmp
    },
    cols: [
      [ // 表头
        // {type: 'checkbox', fixed: 'left'},
        {field: 'task_name', title: '任务名称', width:200, align: 'left', fixed: 'left', templet: addlink },
        {field: 'connect_name1', title: '数据源1名称', width:200, align: 'left'},
        {field: 'connect_name2', title: '数据源2名称', width:200, align: 'left'},
        {field: 'connect_name3', title: '数据源3名称', width:200, align: 'left'},
        {field: 'connect_name4', title: '数据源4名称', width:200, align: 'left'},
        {field: 'connect_name5', title: '数据源5名称', width:200, align: 'left'},
        {field: 'connect_name6', title: '数据源6名称', width:200, align: 'left'},
        {field: 'connect_name7', title: '数据源7名称', width:200, align: 'left'},
        {field: 'last_update_date', title: '最后更新时间', width:180, align: 'left'},
        {field: 'description', title: '描述', width:280, align: 'left'},
        {fixed: 'right', title:'操作', width: 134, minWidth: 250, toolbar: '#barOption'}
      ]
    ],
    loading : true,
    done: function(res, curr, count){
      // console.log(res);
    }
  });

  // 触发单元格工具事件
  table.on('tool(ID-table-demo-search)', function(obj){ // 双击 toolDouble
    var data = obj.data; // 获得当前行数据
    // console.log(obj)
    if(obj.event === 'edit'){
      layui.use('layer', function(){
        var layer = layui.layer;
        //layer.msg('hello');
        layer.open({
          type:2,
          offset:'auto',
          // title:'编辑比对任务 - id:'+ data.id,
          title:'编辑比对任务 - '+ data.task_name,
          skin:'layui-layer-rim', //加上边框
          shadeClose:true,
          chade:false,
          maxmin:true,
          area:['1030px','650px'], //宽高
          content:'/editCompareTask?id=' + data.id
        });
      });

    } else if(obj.event === 'more'){
      // 更多 - 下拉菜单
      dropdown.render({
        elem: this, // 触发事件的 DOM 对象
        show: true, // 外部事件触发即显示
        data: [{
          title: '字段比对',
          id: 'detail'
        },{
          title: '索引比对',
          id: 'compareIndex'
        },{
          title: '序列比对',
          id: 'compareSequence'
        },{
          title: '删除',
          id: 'del'
        }],
        click: function(menudata){
          if(menudata.id === 'detail'){
            layui.use('layer', function(){
              var layer = layui.layer;
              //layer.msg('hello');
              layer.open({
                type:2,
                offset:'auto',
                title:'字段比对 - '+ data.task_name,
                skin:'layui-layer-rim', //加上边框
                shadeClose:true,
                chade:false,
                maxmin:true,
                area:['95%','100%'], //宽高
                content:'/detailCompareTask?id='+ data.id
              });
            });
          } else if(menudata.id === 'compareIndex'){
            layui.use('layer', function(){
              var layer = layui.layer;
              //layer.msg('hello');
              layer.open({
                type:2,
                offset:'auto',
                title:'索引比对 - '+ data.task_name,
                skin:'layui-layer-rim', //加上边框
                shadeClose:true,
                chade:false,
                maxmin:true,
                area:['95%','100%'], //宽高
                content:'/compareIndex?id='+ data.id
              });
            });
          } else if(menudata.id === 'compareSequence'){
            layui.use('layer', function(){
              var layer = layui.layer;
              //layer.msg('hello');
              layer.open({
                type:2,
                offset:'auto',
                title:'序列比对 - '+ data.task_name,
                skin:'layui-layer-rim', //加上边框
                shadeClose:true,
                chade:false,
                maxmin:true,
                area:['95%','100%'], //宽高
                content:'/compareSequence?id='+ data.id
              });
            });
          } else if(menudata.id === 'del'){
            layer.confirm('真的删除比对任务 [ '+ data.task_name +' ] 么？', function(index){
              // obj.del(); // 删除对应行（tr）的DOM结构
              layer.close(index);
              // 向服务端发送删除指令
              $.ajax({
                url:'/deleteCompareTaskData',
                // type:'post',
                contentType:"json",
                data: { // 提交数据
                       "id": data.id // 前者为字段名，后者为数据
                },
                success:function(data){
                  if (data == "deleteCompareTaskData execute success") {
                    // alert('比对任务删除成功！');
                    layer.msg('比对任务删除成功！');
                    parent.layui.table.reload('ID-table-demo-search', {
                      url: '/getConfigCompareTaskData' // 重新从这个URL加载数据
                    });
                    // 关闭当前窗口
                    // var index1 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    // parent.layer.close(index1); //再执行关闭
                  }
                  // obj=JSON.parse(data);
                },
                error:function(){
                    alert("Ajax请求错误！");
                }
              });
            });
          }
        },
        align: 'right', // 右对齐弹出
        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
      })
    } else if(obj.event === 'infoDetail'){
      layui.use('layer', function(){
        var layer = layui.layer;
        //layer.msg('hello');
        layer.open({
          type:2,
          offset:'auto',
          title:'查看比对任务 - '+ data.task_name,
          skin:'layui-layer-rim', //加上边框
          shadeClose:true,
          chade:false,
          maxmin:true,
          // area:['1030px','650px'],
          area:['95%','100%'],
          content:'/detailCompareTask?id='+ data.id
        });
      });
    }
  });

  // 搜索提交
  form.on('submit(demo-table-search)', function(data){
    var field = data.field; // 获得表单字段
    // 执行搜索重载
    table.reload('ID-table-demo-search', {
      page: {
        curr: 1 // 重新从第 1 页开始
      },
      // url: '/getCompareColumnData',  // 此处为静态模拟数据，实际使用时需换成真实接口
      where : {
        "connect_name"  : connect_name_tmp,
        "task_name" : task_name_tmp
      }
    });
    return true; // 阻止默认 form 跳转
  });

});

//获取地址栏参数，key:参数名称
function getUrlParams(key) {
  let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
  let r = window.location.search.substr(1)
      .match(reg);
  if (r != null)
      return unescape(r[2]);
  return null;
}
//获取地址栏参数//可以是中文参数
function getUrlParam(key) {
  // 获取参数
  var url = window.location.search;
  // 正则筛选地址栏
  var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
  // 匹配目标参数
  var result = url.substr(1).match(reg);
  //返回参数值
  return result ? decodeURIComponent(result[2]) : null;
}

function addCompareTask(){
  layui.use('layer', function(){
    var layer = layui.layer;
    layer.open({
      type:2,
      offset:'auto',
      title:'添加比对任务',
      skin:'layui-layer-rim',//加上边框
      shadeClose:true,
      chade:false,
      maxmin:true,
      area:['1030px','650px'],//宽高
      content:'/addCompareTask'
    });
  });
}

var addlink = function (d) {
  var html = '<div><a rel="nofollow" style="color:#1E9FFF" href="javascript:void(0);" lay-event="infoDetail">'
             + d.task_name+ '</a></div>';
  return html
}

</script>

{% endblock %}